<template>
  <div>
    <div class="app-container">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="home">
          <mt-cell v-if="isEmployee">
            home
          </mt-cell>
          <Partner v-else title="列表页面">
            sss
          </Partner>
        </mt-tab-container-item>
        <mt-tab-container-item id="channel">
          <Channel />
        </mt-tab-container-item>
        <mt-tab-container-item id="partner">
          <mt-cell>
            partner
          </mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="me">
          <MeConsultant v-if="isEmployee">
            sss
          </MeConsultant>
          <MeConsultee v-else>
            cons
          </MeConsultee>
        </mt-tab-container-item>
      </mt-tab-container>

      <mt-tabbar v-model="selected">
        <mt-tab-item
          id="home"
          class="el-icon-service"
          @click.native="handleClickTabbar"
        >
          <!-- <img slot="icon" src="../assets/100x100.png" /> -->
          Home
        </mt-tab-item>
        <mt-tab-item
          id="channel"
          class="el-icon-chat-dot-round"
          @click.native="handleClickTabbar"
        >
          <!-- <img slot="icon" src="../assets/100x100.png" /> -->
          Message
        </mt-tab-item>
        <mt-tab-item
          id="partner"
          class="el-icon-notebook-2"
          @click.native="handleClickTabbar"
        >
          <!-- <img slot="icon" src="../assets/100x100.png" /> -->
          Customer
        </mt-tab-item>
        <mt-tab-item
          id="me"
          class="el-icon-user"
          @click.native="handleClickTabbar"
        >
          <!-- <img slot="icon" src="../assets/100x100.png" /> -->
          Me
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>

<script>
import HomeMixin from './homeMixin'
import Channel from '../mail/channel'
import Partner from '../partner/partner-list'
import MeConsultant from '../me/me-consultant'
import MeConsultee from '../me/me-consultee'

export default {
  name: 'Home',
  components: { Partner, Channel, MeConsultant, MeConsultee },
  directives: {},
  filters: {},
  mixins: [HomeMixin],

  data() {
    return {
      //
      // selected: 'me'
    }
  },
  computed: {
    selected: {
      get() {
        return this.$store.state.appView.home
      },
      set(val) {
        this.$store.dispatch('appView/selectHome', val)
      }
    }
  },
  async created() {
    //
    console.log('xxxx, ', this.$router)
    const { tabItem } = this.$route.query
    if (tabItem) {
      this.selected = tabItem
    }
  },

  methods: {
    //
  }
}
</script>

<style type="text/css"></style>
